<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-treeview/bootstrap-treeview.min.css}">
<script type="text/javascript" th:src="@{/js/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootStrap-addTabs/bootstrap.addtabs.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-table/bootstrap-table.min.css}">

<script type="text/javascript" th:src="@{/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script th:src="@{/js/bootstrap-fileinput/js/locales/zh.js}"></script>

<body>
<div>
    <button type="button" class="btn btn-primary"
            data-toggle="modal" data-target="#addLayer">添加记录</button>

</div>
<br>
<div id="tb">
       角色名称:<input type="text" id="rolename">
    <button type="button" onclick="sousuo()"  class="btn btn-success">搜索</button>
</div>




<table id="myTable"></table>
<!--

<div class="modal fade" id="addLayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">添加用户</h4>

            </div>
            <div class="modal-body">
                <form id="myForm">
                    角色名称:<input type="text" name="role_name">
                    备注: <textarea class="form-control" rows="5"  name="info"></textarea>

                    是否启用:<input type="radio" name="user_state"  value = "1" >是 <input type="radio" name="user_state"  value = "1" >否
                </form>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" type="button" onclick="sub()">确认添加</button>
            </div>

        </div>
    </div>
</div>
-->

<div class="modal fade" id="editLayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

                <h4 class="modal-title">编辑用户</h4>

            </div>
            <div class="modal-body">
                <form id="myFormRole" class="form-horizontal">
                    <input type="hidden" id="id" name="id">
                    角色名称:   <input type="text" disabled id="rname" class="form-control" name="role_name">    <br>
                    备注:  <textarea class="form-control" rows="3" cols="2" id="info" name="info"></textarea>

                    是否启用: <input type="radio" id="qi" name="user_state"  value = "1" >是 <input type="radio" name="user_state"  id="guan" value = "2" >否
                </form>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                <button class="btn btn-primary" type="button" onclick="update1()">确定</button>
            </div>

        </div>
    </div>
</div>
<!--
&lt;!&ndash;编辑&ndash;&gt;
<div class="modal fade" id="editLayer1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

                <h4 class="modal-title">授权</h4>

            </div>
            <div class="modal-body">
                <form id="myForm2" class="form-horizontal">
                    <input type="hidden" id="id" class="form-control" name="id"> <br>
                    <input type="hidden" id="userid" class="form-control" name="user_id"> <br>
                    <select class="form-control" name="user_type">
                        <option value="5">超级管理员
                        <option value="6">订单管理员
                        <option value="7">商品管理员

                    </select>
                    <br>
                </form>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                <button class="btn btn-primary" type="button" onclick="update2()">确定</button>
            </div>

        </div>
    </div>
</div>-->
</body>
<script>
    $("#myTable").bootstrapTable({
        url:"user/getRole",
        columns:[
            {field:"xuan",checkbox:true},
            {field:"user_id",title:"编号"},
            {field:"role_name",title:"角色名称"},
            {field:"info",title:"描述"},
            {field:"count",title:"用户数"},
            {field:"add_time",title:"添加时间"},

            {field:"cz",title:"是否启用",formatter:function (value,row){
                    var str='<button class="btn btn-info" onclick="qi(\'' + row.id+ '\','+row.user_id+')">是</button>';
                    var str2='<button class="btn btn-info" onclick="guan(\'' + row.id+ '\','+row.user_id+')">否</button>';
                     return str+"  "+str2;
                }},
            {field:"cxz",title:"操作",formatter:function(value,row){
                    var str='<button class="btn btn-info" onclick="del(\'' + row.id+ '\','+row.user_id+')">删除</button>';
                    var str1='<button class="btn btn-success"  data-toggle="modal" data-target="#editLayer" onclick="getId(\'' + row.id+ '\')">编辑</button>';

                    return str+"     "+str1;
                }},
        ],
        pagination:true,
        pageSize:10,
        pageList:[2,4,6,8,10],
        sidePagination: "client",
        toolbar:"#tb",
    })
function del(id,user_id){
        $.ajax({
            url:"user/del",
            data:{user_id:user_id,id:id},
            success:function(){
                //bootbox.confirm("成功", "info")
                $("#myTable").bootstrapTable('refresh');
            }
        })
    }
    function qi(id,user_id){

        $.ajax({
            url:"user/qi",
            data:{user_id:user_id,id:id},
            success:function(){
                //bootbox.confirm("成功", "info")
                alert("启用成功")
                $("#myTable").bootstrapTable('refresh');
            }
        })
    }
    function guan(id,user_id){
        $.ajax({
            url:"user/guan",
            data:{user_id:user_id,id:id},
            success:function(){
                alert("关闭")
                //bootbox.confirm("成功", "info")
                $("#myTable").bootstrapTable('refresh');
            }
        })
    }
    function sub(){
         $.ajax({
             url:"user/add",
             type:"post",
             data:$("#myForm").serialize(),
             dataType:"json",
             success:function(){
                 alert("成功")
                 $('#myTable').bootstrapTable('refresh');//刷新表格
                 $("#addLayer").modal('hide');
             },error:function(){
                 alert("成功")
                 $('#myTable').bootstrapTable('refresh');//刷新表格
                 $("#addLayer").modal('hide'); //关闭弹窗
             }
         })
     }
     function getId(id){
         $.ajax({
             url:"user/getHui",
             data:{id:id},
             type:"post",
             dataType:"json",
             success:function(data){
                 $("#info").val(data.info);
                 $("#rname").val(data.role_name);
                 $("#id").val(data.id);
                 $("#qi").val(data.user_state);
                 $("#guan").val(data.user_state);


             }
         })
     }
     function update1(){
         $.ajax({
             url:"user/updateRole",
             type:"post",
             data:$("#myFormRole").serialize(),
             dataType:"json",
             success:function(){
                 alert("成功")
                 $('#myTable').bootstrapTable('refresh');//刷新表格
                 $("#editLayer").modal('hide');
             },error:function(){
                 alert("成功")
                 $("#myTable").bootstrapTable('refresh');
                 $("#editLayer").modal('hide'); //关闭弹窗
             }
         })
     }


      //调查*/
    function sousuo(){
        $("#myTable").bootstrapTable("refresh", {
            "query": {
                role_name:$("#rolename").val()
            }
        });
    }
</script>
</html>